<template>
	<view class="my-footprint">
		<view class="opts">
			<text>操作</text>
			<view class="state" @click="onOptsTap()">{{pageObj.state === 'finish' ? '完成' : '管理'}}</view>
		</view>
		<view class="item" :class="pageObj.state === 'finish' ? 'manage' : ''" v-for="(item, idx) in dataObj.list" :key="item.id">
			<view class="select" v-if="pageObj.state === 'finish'" :class="item.selected ? 'selected' : ''" @click="onSelectTap(idx)"></view>
			<image class="cover" :src="item.onclass.image_url"></image>
			<view class="title ellipsis-2">{{item.onclass.name}}</view>
			<view class="info">
				价格：<span class="price">{{item.onclass.price}}</span>
				<span class="type">课程</span>
			</view>
		</view>
		<!-- 底部删除 -->
		<view class="footer" v-if="pageObj.state === 'finish'">
			<view class="select-all" :class="pageObj.isALL ? 'selected' : ''" @click="onSelectAllTap">全选</view>
			<view class="number">共选中 {{sum || 0}} 门</view>
			<view class="btn" @click="onDelTap">删除</view>
		</view>
	</view>
</template>

<script>
	import { requestErrorTip } from '@/common/tools.js';
	
	export default {
		data() {
			return {
				pageObj: {
					state: 'manage',
					isALL: false,
				},
				dataObj: {
					list: []
				}
			}
		},
		onLoad() {
			this.getData(); // 获取数据
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getData(); // 获取数据
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		computed: {
			// 选中商品数量
			sum: function() {
				if (this.pageObj.state === 'manage') return false;
				let sum = 0;
				let hasNoSelect = false; // 判断是否存在一个数据没有选中
				for(let i in this.dataObj['list']){
					const item = this.dataObj['list'][i];
					if (item['selected']) {
						sum++;
					} else {
						hasNoSelect = true;
					}
				}
				if (hasNoSelect) {
					// 至少一个未有选中，则设置全部为选中
					this.pageObj['isALL'] = false;
				} else {
					// 全部都选中的，则设置全部为不选中
					this.pageObj['isALL'] = true;
				}
				return sum;
			}
		},
		methods: {
			// 页面管理
			onOptsTap() {
				if (this.pageObj.state === 'finish') {
					this.pageObj.state = 'manage';
				} else {
					this.pageObj.state = 'finish';
				}
			},
			// 选择单个
			onSelectTap(index) {
				this.dataObj['list'][index]['selected'] = !this.dataObj['list'][index]['selected'];
			},
			// 页面跳转
			onPageTap(type) {
				uni.navigateTo({
					url: '/pages/question/answer?title=' + type
				});
			},
			// 删除
			onDelTap() {
				let ids = ''
				for(let i in this.dataObj['list']) {
					const item = this.dataObj['list'][i]
					if (item.selected) {
						if (ids) {
							ids += ',' + item.onclass_id
						} else {
							ids = item.onclass_id
						}
					}
				}
				if (!ids) {
					requestErrorTip('toast', '请选择要删除的数据');
					return false
				}
				this.PostDel(ids)
			},
			// 选择全部
			onSelectAllTap() {
				let hasNoSelect = false; // 判断是否存在一个数据没有选中
				for(let i in this.dataObj['list']){
					if (!this.dataObj['list'][i]['selected']) {
						hasNoSelect = true;
					}
				}
				if (hasNoSelect) {
					// 至少一个未有选中，则设置全部为选中
					this.pageObj['isALL'] = true;
					for(let i in this.dataObj['list']){
						this.dataObj['list'][i]['selected'] = true;
					}
				} else {
					// 全部都选中的，则设置全部为不选中
					this.pageObj['isALL'] = false;
					for(let i in this.dataObj['list']){
						this.dataObj['list'][i]['selected'] = false;
					}
				}
			},
			// 获取数据
			getData() {
				this.$Requset({
					url: this.$Api['user']['Browsing'],
					data: {},
					success: (res) => {
						const { data, status, msg } = res;
						if (!status) {
							requestErrorTip('toast', msg);
							return;
						}
						this.dataObj['list'] = data['list'].filter(item => {
							item['selected'] = false;
							return item
						})
					},
					fail: (err) => {
						console.log(err);
					}
				})
			},
			// 删除
			PostDel(ids) {
				this.$Requset({
					url: this.$Api['user']['delBrowsing'],
					data: {
						onclass_ids: ids
					},
					success: (res) => {
						const { data, status, msg } = res;
						if (!status) {
							requestErrorTip('toast', msg);
							return;
						}
						this.getData();
					},
					fail: (err) => {
						console.log(err);
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #f5f5f5;
	}
	.my-footprint{
		padding-top: 18rpx;
		.opts{
			line-height: 80rpx;
			font-size: 32rpx;
			color: #333;
			background-color: #fff;
			margin-bottom: 18rpx;
			padding: 0 36rpx;
			.state{
				float: right;
				font-weight: bold;
			}
		}
		.item{
			box-sizing: border-box;
			position: relative;
			width: 100%;
			height: 222rpx;
			padding: 32rpx 36rpx 32rpx 308rpx;
			border-radius: 22rpx;
			background-color: #FFFFFF;
			margin-bottom: 18rpx;
			.select{
				position: absolute;
				top: 32rpx;
				left: 36rpx;
				width: 40rpx;
				height: 40rpx;
				background-repeat: no-repeat;
				background-position: center center;
				background-size: 100%;
				background-image: url(../../../static/images/cart/select.png);
			}
			.selected{
				background-image: url(../../../static/images/cart/selected.png);
			}
			.cover{
				position: absolute;
				top: 32rpx;
				left: 36rpx;
				width: 254rpx;
				height: 158rpx;
				background-color: #F7F7F7;
				border-radius: 14rpx;
			}
			.title{
				height: 80rpx;
				line-height: 40rpx;
				font-size: 26rpx;
				color: #1A1A1A;
			}
			.info{
				height: 46rpx;
				line-height: 46rpx;
				font-size: 22rpx;
				color: #7F7F7F;
				.price{
					font-size: 30rpx;
					font-weight: bold;
					color: $color-common;
				}
				.type{
					float: right;
				}
			}
		}
		.manage{
			padding: 32rpx 36rpx 32rpx 370rpx;
			.cover{
				left: 98rpx;
			}
		}
		
		.footer{
			box-sizing: border-box;
			position: fixed;
			z-index: 99;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 90rpx;
			padding: 10rpx 200rpx 10rpx 36rpx;
			background-color: #FFFFFF;
			.select-all{
				float: left;
				position: relative;
				line-height: 70rpx;
				width: 66rpx;
				font-size: 26rpx;
				color: #1A1A1A;
				padding-left: 48rpx;
				margin-right: 14rpx;
				&::before{
					content: '';
					position: absolute;
					top: 50%;
					margin-top: -20rpx;
					left: 0;
					width: 40rpx;
					height: 40rpx;
					background-repeat: no-repeat;
					background-position: center center;
					background-size: 100%;
					background-image: url(../../../static/images/cart/select.png);
				}
				&::after{
					content: '';
					position: absolute;
					top: 50%;
					margin-top: -18rpx;
					right: 0;
					width: 1rpx;
					height: 36rpx;
					background-color: #E4EAED;
				}
			}
			.selected{
				&::before{
					background-image: url(../../../static/images/cart/selected.png);
				}
			}
			.number{
				line-height: 70rpx;
				font-size: 26rpx;
				color: #7F7F7F;
			}
			.btn{
				position: absolute;
				top: 10rpx;
				right: 36rpx;
				width: 200rpx;
				height: 70rpx;
				line-height: 70rpx;
				font-size: 26rpx;
				color: #FFFFFF;
				text-align: center;
				background-color: #373737;
				border-radius: 35rpx;
			}
		}
	}
</style>
